import React,{lazy} from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import './home.scss'
import Index from './index.jsx'
let Find=lazy(()=>import('../find/find.jsx'))
let Me=lazy(()=>import('../me/me.jsx'))
let News=lazy(()=>import('../news/news.jsx'))


export default class Home extends React.Component{
   constructor(props){
       super(props)
       this.tabBar=[
           { title:'首页', icon:'icon-ind',  path:'/home' },
           { title:'找房', icon:'icon-findHouse',  path:'/home/find' },
           { title:'资讯', icon:'icon-infom',  path:'/home/news' },
           { title:'我的', icon:'icon-my',  path:'/home/my' },
       ]
       this.state={
          selectedTab:props.location.pathname
       }
   }
   componentDidUpdate(preProps){
       if(this.props.location.pathname!==preProps.location.pathname){
           this.setState({
            selectedTab:this.props.location.pathname
           })
       }
   }
   changeTab=(path)=>{
      this.setState({
        selectedTab:path
      })
      console.log(this.props.history,'oooooo')
      this.props.history.push(path)
   }
    render(){
        return <div className='home'>
            <Route path='/home' exact component={Index} />
            <Route path='/home/find' component={Find} />
            <Route path='/home/news' component={News} />
            <Route path='/home/my' component={Me} />
            <TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="white" className='tab-bar'  noRenderContent>
                {this.tabBar.map(item=>{
                    return <TabBar.Item title={item.title} key={item.title}
                              icon={<i className={`iconfont ${item.icon}`} ></i>}
                              selectedIcon={<i className={`iconfont ${item.icon}`} />}
                              selected={this.state.selectedTab === item.path}
                              onPress={e=>this.changeTab(item.path)}
                           >
                    </TabBar.Item>
                })}
                
            </TabBar>
        </div>
    }
}